<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @import url(http://fonts.useso.com/css?family=Lato:100,300,400,700);

        html {
            font-family: 'Lato', sans-serif;
        }

        body {
            background: #222;
        }

        .pricingTable {
            text-align: center;
        }

        .item {
            display: inline-block;
            width: 260px;
            height: 480px;
            background: #fff;
            margin: 10px;
            vertical-align: top;
        }

        .item:before {
            content: "";
            display: block;
            width: 100%;
            height: 10px;
        }

        .item:nth-child(1):before {
            background: #0074d9;
        }

        .item:nth-child(2):before {
            background: #ff4136;
        }

        .item:nth-child(3):before {
            background: #2ecc40;
        }

        .title {
            width: 180px;
            height: 134px;
            padding-top: 46px;
            border-radius: 50%;
            color: #fff;
            font-size: 46px;
            font-weight: 200;
            margin: 10px auto;
        }

        .title .smallText {
            font-size: 14px;
        }

        .title .undertext {
            display: block;
            font-size: 16px;
        }

        .item:nth-child(1) .title {
            background: #0074d9;
            border: 2px solid #0074d9;
        }

        .item:nth-child(2) .title {
            background: #ff4136;
            border: 2px solid #ff4136;
        }

        .item:nth-child(3) .title {
            /* List */

            background: #2ecc40;
            border: 2px solid #2ecc40;
        }

        .item ul {
            margin: 10px 0;
            padding: 0;
            list-style: none;
        }

        .item ul li {
            display: block;
            width: 90%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            font-weight: 300;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            margin: 0 auto;
        }

        .keywords {
            font-weight: 400;
        }

        .button {
            width: 140px;
            height: 35px;
            color: #fff;
            font-weight: 300;
            line-height: 35px;
            border: 2px solid #fff;
            margin: 0 auto;
        }

        .item:nth-child(1) .button {
            background: #0074d9;
        }

        .item:nth-child(2) .button {
            background: #ff4136;
        }

        .item:nth-child(3) .button {
            background: #2ecc40;
        }

        .item:nth-child(1):hover .title {
            background: #fff;
            color: #0074d9;
        }

        .item:nth-child(2):hover .title {
            background: #fff;
            color: #ff4136;
        }

        .item:nth-child(3):hover .title {
            background: #fff;
            color: #2ecc40;
        }

        .item:nth-child(1):hover .button {
            background: #fff;
            color: #0074d9;
            font-weight: 400;
            border: 2px solid #0074d9;
        }

        .item:nth-child(2):hover .button {
            background: #fff;
            color: #ff4136;
            font-weight: 400;
            border: 2px solid #ff4136;
        }

        .item:nth-child(3):hover .button {
            background: #fff;
            color: #2ecc40;
            font-weight: 400;
            border: 2px solid #2ecc40;
        }
    </style>
</head>
<body>
<div class="pricingTable">
    <div class="item">
        <div class="title">£10.<span class="smallText">00</span>
            <span class="undertext">Per Month</span>
        </div>
        <ul>
            <li><span class="keywords">1GB</span> Storage</li>
            <li><span class="keywords">Unlimited</span> Bandwidth</li>
            <li><span class="keywords">Unlimited</span> Email Accounts</li>
            <li>Host <span class="keywords">2 Websites</span>
            </li>
            <li><span class="keywords">2 MySQL</span> Databases</li>
        </ul>
        <div class="button">Sign Up</div>
    </div>
    <div class="item">
        <div class="title">£20.<span class="smallText">00</span>
            <span class="undertext">Per Month</span>
        </div>
        <ul>
            <li><span class="keywords">10GB</span> Storage</li>
            <li><span class="keywords">Unlimited</span> Bandwidth</li>
            <li><span class="keywords">Unlimited</span> Email Accounts</li>
            <li>Host <span class="keywords">4 Websites</span>
            </li>
            <li><span class="keywords">4 MySQL </span>Databases</li>
        </ul>
        <div class="button">Sign Up</div>
    </div>
    <div class="item">
        <div class="title">£30.<span class="smallText">00</span>
            <span class="undertext">Per Month</span>
        </div>
        <ul>
            <li><span class="keywords">30GB</span> Storage</li>
            <li><span class="keywords">Unlimited</span> Bandwidth</li>
            <li><span class="keywords">Unlimited</span> Email Accounts</li>
            <li>Host <span class="keywords">Unlimited Websites</span>
            </li>
            <li><span class="keywords">Unlimited MySQL</span> Databases</li>
        </ul>
        <div class="button">Sign Up</div>
    </div>

</div>
</body>
</html>